<template>
	<view class="popup" :class="{show:isShow}">
		<view class="red-wrap">
			<view class="red-head">
				<view class="u-flex">
					<image class="avatar" :src="avatar" mode="aspectFill"></image>
					<view class="u-m-l-20 u-font-28">
						{{title}}
					</view>
				</view>
				<view class="u-font-40 u-m-t-20 u-text-center u-line-2">
					{{greet}}
				</view>
				<view v-if="canOpen" class="open" :class="{opening:loading}" @tap="undo">
					開
				</view>
			</view>
			<view class="red-foot">
				<text v-if="canDetail" @tap="toDetail">查看领取详情<text class="iconfont icon-arrow-right"></text></text>
			</view>
		</view>
		<view class="close iconfont icon-fail" @tap="hide">
			
		</view>
	</view>
</template>

<script>
	import * as redAPI from "@/api/red.js"
	import { TYPES } from "@/api/red"
	import {jumpTo,delay, toast} from "@/utils/util.js"
	import {mapActions,mapGetters} from "vuex"
	import {oncePlay} from "@/player/audio.js"
	export default{
		data(){
			return{
				id:'',
				avatar:'',
				title:'',
				greet:'',
				canOpen:false,
				canDetail:false,
				isShow:false, 
				loading:false, 
				redInfo:null, 
			}
		},
		computed:{
			...mapGetters('user',['userId']),
			...mapGetters('chat',['gotReds']),
			...mapGetters('wallet', ['assets']),
		},
		watch:{
			gotReds(val){
				console.log(val)
			}
		},
		methods:{
			jumpTo,
			...mapActions('chat',['pushGotRed']),
			...mapActions('wallet',['fetchAssets']),
			show({id,avatar,title,greet='恭喜发财，大吉大利',canOpen=false,canDetail=false}){
				this.id = id
				this.avatar = avatar
				this.title = title
				this.greet = greet
				this.canOpen = canOpen
				this.canDetail = canDetail
				this.isShow = true
			},
			hide(){
				this.isShow = false
			},
			
			async grab(info){ 
				if(this.grab.lock){
					return
				}
				try{
					this.grab.lock = true
					this.redInfo = await redAPI.rob(info.id)
					this.redInfo.ext = JSON.parse(this.redInfo.ext||"{}")
					this.show({
						id:info.id,
						avatar:info.avatar,
						title:`${info.userName}的红包`,
						greet:info.brief,
						canDetail:false,
						canOpen:true
					})
				}catch(e){
					this.redInfo = null
					this.show({
						id:info.id,
						avatar:info.avatar,
						title:`${info.userName}的红包`,
						greet:e.retDesc,
						canDetail:true,
						canOpen:false
					})
				}finally{
					this.grab.lock = false
				}
			},
			async undo(){ 
				if(this.loading){
					return
				}
				if(this.redInfo.type==TYPES.BOMB){
					console.log(this.assets.catMoney,this.redInfo)
					if((this.assets.catMoney*100)<(this.redInfo.amount*this.redInfo.ext.odds)){
						return toast(`您的余额不足本金${this.redInfo.ext.odds}倍数的总和，无法抢该红包。`)
					}
				}
				const targets = this.redInfo.ext.targets||[]
				if(targets.length&&!targets.some((item)=>item==this.userId)){
					this.greet = '您不在该红包的指定用户中,不能领取'
					this.canDetail = true
					this.canOpen = false
					return toast(this.greet) 
				}
				try{
					this.loading = true
					oncePlay('/static/voice/openred.mp3')
					await redAPI.unpack(this.id)
					await delay(1000)
					this.pushGotRed(this.id)
					this.hide()
					this.fetchAssets()
					uni.navigateTo({
						url:`/pages/red/result?id=${this.id}`
					})
				}catch(e){
					this.greet = e.retDesc
					this.canDetail = true
					this.canOpen = false
				}finally{
					this.loading = false
				}
			},
			toDetail(){
				this.hide()
				jumpTo(`/pages/red/result?id=${this.id}`)
			}
		}
	}
</script>
<style lang="scss" scoped>
	@keyframes opening{
		from{
			transform: rotateY(0deg);
		}
		to{
			transform: rotateY(360deg);
		}
	}
	.popup{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
		background-color: rgba($color:#ffffff, $alpha:0.7);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		opacity: 0;
		transform: translateY(200%);
		&.show{
			opacity: 1;
			transform: translateY(0%);
			.red-wrap{
				transform: scale(1);
			}
		}
		.red-wrap{
			margin-top: 80rpx;
			width: 600rpx;
			height: 900rpx;
			background-color: #e1604c;
			border-radius: 20rpx;
			color: #fae2b8;
			overflow: hidden;
			transform: scale(0.5);
			transition: transform 300ms cubic-bezier(0, 0, 0.8, 1.5);
			.red-head{
				height: 700rpx;
				background-color: #e36855;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				border-bottom-left-radius: 600rpx 150rpx;
				border-bottom-right-radius: 600rpx 150rpx;
				box-shadow: 0 0 10rpx rgba($color:#000000, $alpha:0.5);
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 200rpx 40rpx 0;
				.avatar{
					width: 50rpx;
					height: 50rpx;
					border-radius: 10rpx;
				}
				.open{
					position: absolute;
					left: 230rpx;
					bottom: -70rpx;
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					background-color: #e8cfa5;
					color: #333333;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 60rpx;
					box-shadow: 0 0 10rpx rgba($color:#000000, $alpha:0.5);
					&.opening{
						animation: opening 1s linear infinite;
					}
				}
			}
			.red-foot{
				height: 200rpx;
				padding-bottom: 50rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
			}
		}
		.close{
			margin-top: 80rpx;
			font-size: 100rpx;
			color: #d3b174;
		}
	}
</style>